import React, { useEffect, useState } from 'react';
import { Button } from 'antd';
import * as echarts from 'echarts';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { exchartResize } from '@/hooks/index';
function message() {
  const [num, setNum] = useState(0);
  useEffect(() => {
    let chartDom: any = document.getElementById('main');
    let myChart = echarts.init(chartDom);
    let option;
    option = {
      title: {
        text: '报表统计',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['新增客服', '新增游客', '新增会话'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '2023-02-01',
          '2023-02-05',
          '2023-02-09',
          '2023-02-13',
          '2023-02-17',
          '2023-02-21',
          '2023-02-25',
          '2023-02-29',
          '2023-03-03',
        ],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '新增客服',
          type: 'line',
          smooth: true,
          stack: 'Total',
          data: [0, 1, 1, 0, 1.5, 2, 0, num, 0],
        },
        // {
        //   name: '新增游客',
        //   type: 'line',
        //   smooth: true,
        //   stack: 'Total',
        //   data: [0, 1.5, 0.5, 0, 0, 0, 0, 0, 0],
        // },
        // {
        //   name: '新增会话',
        //   type: 'line',
        //   smooth: true,
        //   stack: 'Total',
        //   data: [1, 0, 0, 0, 0, 0, 1, 0.5, 0],
        // },
      ],
    };

    option && myChart.setOption(option);
    exchartResize(myChart);
    return () => {
      myChart.dispose();
    };
  }, [num]);

  return (
    <div style={{ background: '#ccc' }}>
      <div
        style={{
          height: '270px',
          border: '0.5px solid #fff',
          background: '#fff',
        }}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            width: '600px',
            height: '250px',
            border: '1px solid #ccc',
            marginTop: '10px',
          }}
        >
          <p
            style={{
              width: '600px',
              height: '40px',
              lineHeight: '40px',
            }}
          >
            &emsp;
            <ExclamationCircleOutlined /> &ensp;<span>数据统计</span>
            <hr />
          </p>

          <div
            style={{
              width: '600px',
              height: '200px',
              display: 'flex',
              flexWrap: 'wrap',
            }}
          >
            <span
              style={{
                width: '200px',
                marginLeft: '50px',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                textAlign: 'left',
                height: '60px',
                background: ' rgb(248,248,248)',
                zIndex: 10,
              }}
            >
              &emsp;客服总数<span> &emsp;8</span>
            </span>
            <span
              style={{
                width: '200px',
                display: 'flex',
                marginLeft: '50px',
                flexDirection: 'column',
                justifyContent: 'center',
                textAlign: 'left',
                height: '60px',
                background: ' rgb(248,248,248)',
                zIndex: 10,
              }}
            >
              &emsp; 当前在线客服 <span>&emsp;0</span>
            </span>
            <span
              style={{
                width: '200px',
                display: 'flex',
                marginLeft: '50px',
                flexDirection: 'column',
                justifyContent: 'center',
                textAlign: 'left',
                height: '60px',
                background: ' rgb(248,248,248)',
                zIndex: 10,
              }}
            >
              &emsp;当前在线访客 <span>&emsp;1</span>
            </span>
            <span
              style={{
                width: '200px',
                display: 'flex',
                marginLeft: '50px',
                flexDirection: 'column',
                justifyContent: 'center',
                textAlign: 'left',
                height: '60px',
                background: ' rgb(248,248,248)',
                zIndex: 10,
              }}
            >
              &emsp;今日会话 <span>&emsp;0</span>
            </span>
          </div>
        </div>
      </div>
      <div style={{ background: '#fff' }}>
        <div id="main" style={{ width: '100%', height: '400px' }}></div>
        <Button
          onClick={() => {
            setNum(num + 1);
          }}
        >
          点我
        </Button>
      </div>
    </div>
  );
}

export default message;
